<template>
  <div class="apply-manage">
    <div class="content-box">
      <div class="content-header">服务申请管理</div>
      <div class="content-body">
        <div class="body-box">
          <div class="method-search">
            <div class="input-item">
              <span>服务接口：</span>
              <el-input
                v-model="getListParams.apiName"
                clearable
                placeholder="请输入服务接口"
                autocomplete="off"
                style="width: 200px"
              >
              </el-input>
              <span class="ml10">接口类型：</span>
              <el-select
                v-model="getListParams.apiType"
                placeholder="请选择接口类型"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="(item, index) in apiTypeData"
                  :key="index"
                  :value="item.apiType"
                  :label="item.name"
                >
                </el-option>
              </el-select>
              <span class="ml10">使用者：</span>
              <!-- <el-select placeholder="请选择使用者" style="width: 200px">
                <el-option v-for="(item, index) in []" :key="index"> </el-option>
              </el-select> -->
              <el-input
                v-model="getListParams.apiUser"
                clearable
                placeholder="请输入使用者"
                autocomplete="off"
                style="width: 200px"
              >
              </el-input>
              <el-button type="primary" class="ml10" @click="acceptApplyList">
                <el-icon class="el-icon--left">
                  <Search />
                </el-icon>
                查询
              </el-button>
            </div>
            <el-button type="primary" @click="isApplyShow = true">
              <el-icon class="el-icon--left">
                <Plus />
              </el-icon>
              新增申请
            </el-button>
          </div>
          <div class="table">
            <el-table :data="dataList" border height="100%">
              <el-table-column align="center" property="apiName" label="服务接口">
              </el-table-column>
              <el-table-column align="center" property="apiType" label="请求类型">
                <template #default="{ row }">
                  {{ row.apiType == 1 ? 'POST' : 'GET' }}
                </template>
              </el-table-column>
              <el-table-column align="center" property="proName" label="服务接口类型">
              </el-table-column>
              <el-table-column align="center" property="apiUser" label="使用方"> </el-table-column>
              <el-table-column
                align="center"
                property="applyKey"
                label="访问证书"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="申请状态" align="center">
                <template v-slot="scope">
                  <el-button v-if="scope.row.state == 1" size="small" type="info" text
                    >已停用</el-button
                  >
                  <el-button v-else size="small" type="success" text>已启用</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300px">
                <template v-slot="scope">
                  <el-button
                    v-if="scope.row.state == 1"
                    size="small"
                    type="info"
                    @click="handleState(0, scope.row.id)"
                  >
                    <el-icon class="el-icon--left"> <RefreshRight /> </el-icon>启用</el-button
                  >
                  <el-button
                    v-else
                    size="small"
                    type="success"
                    @click="handleState(1, scope.row.id)"
                    ><el-icon class="el-icon--left"> <RefreshRight /> </el-icon>停用</el-button
                  >
                  <el-button size="small" type="danger" @click="deleteApi(scope.row.id)">
                    <el-icon class="el-icon--left">
                      <Delete />
                    </el-icon>
                    刪除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="page.pageSize"
              background
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="isApplyShow" title="服务接口注册" width="35%" :before-close="handleClose">
      <el-form
        ref="ruleFormRef"
        :model="applyForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="项目名称" prop="proId">
          <el-select
            v-model="applyForm.proId"
            placeholder="请选择"
            filterable
            @change="handleChange"
          >
            <el-option
              :key="index"
              v-for="(item, index) in state.serverTypeList"
              :value="item.id"
              :label="item.proName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接口名称" prop="apiId">
          <el-select v-model="applyForm.apiId" placeholder="请选择" filterable>
            <el-option
              :key="index"
              v-for="(item, index) in state.apiName"
              :value="item.id"
              :label="item.apiName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请人" prop="apiUser">
          <el-input class="formwidth" placeholder="请输入" v-model="applyForm.apiUser" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleRegister"> 注册 </el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import pagiNation from '@/components/app-pagination/pagination.vue'
// api
import {
  // 查询对外服务列表
  getApplyList,
  // 删除服务
  deleteApplyApi,
  // 更新服务状态
  updateState,
  getProjectList,
  getApiList,
  addApplyApi
} from '@/services/modules/external-service'
import { ElMessage, ElMessageBox } from 'element-plus'
const currentPage = ref(1)
// 新增申请
let isApplyShow = ref(false)
//formRef
const ruleFormRef = ref(null)
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 0 // 记录总数
})
// 查询参数
const getListParams = reactive({
  pageNum: 1,
  pageSize: 10,
  // 接口名称
  apiName: '',
  // 使用者
  apiUser: '',
  // 接口类型 1post,2get
  apiType: ''
})
//申请form
let applyForm = reactive({
  // 项目名称
  proId: '',
  // 接口名称
  apiId: '',
  // 申请人
  apiUser: ''
})
//
const state = reactive({
  // 项目
  serverTypeList: [],
  // 接口名称
  apiName: []
})
// 接口类型
const apiTypeData = reactive([
  { name: 'POST', apiType: 1 },
  { name: 'GET', apiType: 2 }
])
const rules = {
  proId: [{ required: true, message: '请选择项目', trigger: 'blur' }],
  apiId: [{ required: true, message: '请选择接口', trigger: 'blur' }],
  apiUser: [{ required: true, message: '请输入申请人', trigger: 'blur' }]
}
// const dataList1 = [
//   // {
//   //   applyUse: '获取当前模型通讯健康状况',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:eyJdfdsdhbGciOiJSUzI1NiIsInR5'
//   // },
//   // {
//   //   applyUse: '获取数据类型列表',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:edsadsayJhbGciOiJSUzI1NiIsInR5'
//   // },
//   // {
//   //   applyUse: '获取模型类型列表',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // },
//   // {
//   //   applyUse: '获取流域信息',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:3231GciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // },
//   // {
//   //   applyUse: '获取基面信息',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:eyJdsadhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // },
//   // {
//   //   applyUse: '获取模型要素列表',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key: eyaaddJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // },
//   // {
//   //   applyUse: '获取设计降雨信息',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:dsadaseyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // },
//   // {
//   //   applyUse: '获取预制输出项列表',
//   //   buildPerson: 'GET',
//   //   buildTime: '新安江',
//   //   use: '联合调度四预报系统 ',
//   //   keybook: 'key:fdfyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9'
//   // }
// ]
let dataList = ref([])
onMounted(() => {
  acceptApiModels()
  // 初始查询对外服务列表
  acceptApplyList()
})
// 查询对外服务列表
function acceptApplyList() {
  getApplyList(getListParams).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data.list
      page.total = res.data.totalRow
    }
  })
}
// 变更服务状态
function handleState(state, id) {
  updateState({ state, id }).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: '状态修改成功',
        type: 'success'
      })
      acceptApplyList()
    }
  })
}
// 删除服务申请
function deleteApi(id) {
  ElMessageBox.confirm('您确定要执行删除操作吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteApplyApi({ id }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          // 重新加载列表
          acceptApplyList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
// 切换页码
function handleCurrentChange(val) {
  currentPage.value = val
  getListParams.pageNum = val
  acceptApplyList()
}
// 获取接口项目内容
function acceptApiModels() {
  getProjectList().then((res) => {
    if (res.code == 200) {
      state.serverTypeList = res.data
    }
  })
}
// 申请
function handleRegister() {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      addApplyApi(applyForm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            message: '申请成功',
            type: 'success'
          })
          // 成功申请后关闭弹窗
          handleClose()
          // 申请后重新获取列表
          acceptApplyList()
        }
      })
    } else {
      return false
    }
  })
}
// 选择接口项目 获取接口名称
function handleChange(val) {
  getApiList({ proId: val }).then((res) => {
    if (res.code == 200) {
      state.apiName = res.data
    }
  })
}
// 取消
function handleClose() {
  isApplyShow.value = false
  ruleFormRef.value.resetFields()
  applyForm.apiUser = ''
}
</script>

<style lang="less" scoped>
.apply-manage {
  height: 100%;

  .pages {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .content-box {
    height: 100%;

    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid var(--border-primary);
      font-size: var(--header-fontsize);
      font-weight: 700;
      box-sizing: border-box;
    }

    .content-body {
      height: calc(100% - 50px);
      padding: 10px;
      box-sizing: border-box;

      .body-box {
        height: 100%;
        border: 1px solid var(--border-primary);
        border-radius: 10px;
        box-sizing: border-box;

        .method-search {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          padding: 0 10px;
        }

        .table {
          height: calc(100% - 100px);
        }

        .page {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          height: 50px;
        }
      }
    }
  }
}
</style>
